<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户物流管理</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/用户物流管理.css">


</head>

<body>
<!-- 物流跟踪主内容 -->
<div class="container tracking-container">
    <div class="row mb-4">
        <div class="col-12">
            <h2><i class="bi bi-truck"></i> 物流跟踪</h2>
            <p class="text-muted">追踪您的非遗文化商品运送状态</p>
        </div>
    </div>

    <!-- 订单信息 -->
    <div class="order-card">
        <div class="row">
            <div class="col-md-6">
                <h4>订单编号: SCFY20250002</h4>
                <p><i class="bi bi-clock"></i> 下单时间: 2025年2月10日 18:21</p>
            </div>
            <div class="col-md-6 text-md-end">
                <span class="status-label status-shipping">运输中</span>
                <p>预计送达: 2025年2月15日</p>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-md-6">
                <h5><i class="bi bi-box-seam"></i> 商品信息</h5>
                <div class="d-flex mt-3">
                    <img src="../../img/轮播图图片04.jpg" alt="古风折扇"
                         style="width: 80px; height: 80px; object-fit: cover; border-radius: 5px; border: 1px solid #b8a385;">
                    <div class="ms-3">
                        <h6>古风折扇</h6>
                        <p>数量: 2</p>
                        <p>总价: ￥360.00</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h5><i class="bi bi-geo-alt"></i> 收货信息</h5>
                <p class="mt-3">张三 先生</p>
                <p>138****8888</p>
                <p>四川省成都市青羊区非遗大道88号</p>
            </div>
        </div>
    </div>
    <!-- 百度地图容器 -->
    <div id="mapContainer" style="width: 100%; height: 400px; margin-top: 20px;"></div>
</div>

    <!-- 物流时间线 -->
    <h4 class="mb-4"><i class="bi bi-list-check"></i> 物流详情</h4>

    <!-- 当前状态 - 激活状态 -->
    <div class="timeline-item active">
        <div class="timeline-content">
            <div class="timeline-date">2025年2月12日 14:30</div>
            <div class="timeline-status">已到达成都中转站</div>
            <p class="mb-0">商品正在分拣中，即将发往目的地</p>
        </div>
    </div>

    <!-- 历史状态 -->
    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2025年2月11日 09:15</div>
            <div class="timeline-status">已离开宜宾仓库</div>
            <p class="mb-0">商品正在运输途中</p>
        </div>
    </div>

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2025年2月10日 20:45</div>
            <div class="timeline-status">商家已发货</div>
            <p class="mb-0">商品已打包完成，等待快递取件</p>
        </div>
    </div>

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2025年2月10日 18:21</div>
            <div class="timeline-status">订单已支付</div>
            <p class="mb-0">您的订单已确认，准备发货</p>
        </div>
    </div>

    <!-- 物流公司信息 -->
    <div class="card mt-4" style="background-color: rgba(235, 221, 199, 0.8); border: 1px solid #b8a385;">
        <div class="card-body">
            <h5><i class="bi bi-truck"></i> 物流公司信息</h5>
            <div class="row mt-3">
                <div class="col-md-6">
                    <p><strong>快递公司:</strong> 传统速运</p>
                    <p><strong>运单号码:</strong> CS20250210888</p>
                </div>
                <div class="col-md-6">
                    <p><strong>客服电话:</strong> 666666</p>
                    <p><strong>官方网站:</strong> <a href="#" style="color: #9A1F1A;">www.wenchuang.com</a></p>
                </div>
            </div>
            <button class="btn mt-2" style="background-color: #9A1F1A; color: #f0e6d2;"><a
                    href="客服.html">联系物流客服</a> </button>
        </div>
    </div>



<!-- 页脚 -->
<footer class="footer mt-5 py-4" style="background: #2A3547; color: #F8F4E9;">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5 class="footer-title">关于我们</h5>
                <p>传承中华文化，创新文创设计</p>
            </div>
            <div class="col-md-4">
                <h5 class="footer-title">联系方式</h5>
                <p><a href="客服.html">在线客服</a></p>
                <p>Email: service@wenchuang.com</p>
            </div>
            <div class="col-md-4">
                <h5 class="footer-title">关注我们</h5>
                <div class="social-icons">
                </div>
            </div>
        </div>
        <div class="text-center mt-3 pt-3" style="border-top: 1px solid #7B9EA8;">
            <p>©四川非遗版权所有</p>
        </div>
    </div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
</body>
</html>